<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ彩贝</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: rosybrown;
				font-size: 15px;
				font-weight: bold;
			}
			/*左中右的排版*/
			#div-left{
				width: 300px;
				height: 400px;
				margin-left: 200px;
				margin-top: 200px;
				float: left;
				border: 1px solid gray;
			}
			#div-centen{
				width: 300px;
				height: 400px;
				margin-top: 200px;
				float: left;
				border: 1px solid gray;
				border-left: none;
			}
			#div-right{
				width: 300px;
				height: 400px;
				margin-top: 200px;
				float: left;
				border: 1px solid gray;
				border-left: none;
			}
			/*中间内部的排版*/
			#centen-top{
				margin-top: 20px;
				height: 150px;
				line-height:35px ;
				padding: 10px;
				position: relative;
				border-bottom: 1px solid rosybrown;
			}
			#centen-top img{
				position: absolute;
				bottom: 10px;
				right: 5px;
			}
			#centen-botton{
				margin-top: 20px;
				height: 150px;
				line-height:35px ;
				padding: 10px;
				position: relative;
			}
			#centen-botton img{
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
			/*右边内部排版*/
			#right-top{
				margin-top: 20px;
				height: 150px;
				line-height:35px ;
				padding: 10px;
				position: relative;
				border-bottom: 1px solid rosybrown;
			}
			#right-top img{
				position: absolute;
				bottom: 10px;
				right: 5px;
			}
			#right-botton{
				margin-top: 20px;
				height: 150px;
				line-height:35px ;
				padding: 10px;
				position: relative;
			}
			#right-botton img{
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
			/*左边内部排版*/
			#div-left{
				position: relative;
			}
			#div-left ul{
					margin-top: 40px;
					line-height:50px ;
					padding: 10px;
				}
			#div-left p img{
				position: absolute;
				bottom: 50px;
				right: 20px;
			}
		</style>
	</head>
	<body>
		<div id="div">
			<div id="div-left">
				<ul>
					<li><a href="#">超级信用卡</a></li>
					<li>线上线下课累计彩贝积分</li>
				</ul>
				<p><img src="img/1.bmp"/></p>
			</div>
			<div id="div-centen">
				<div id="centen-top">
					<ul>
					<li><a href="#">彩贝抢霸</a></li>
					<li>每天10点更新</li>
				</ul>
				<img src="img/2.bmp"/>
				</div>
				<div id="centen-botton">
					<ul>
					<li><a href="#">促销活动</a></li>
					<li>汇集全网优惠</li>
				</ul>
				<img src="img/4.bmp"/>
				</div>
			</div>
			<div id="div-right">
				<div id="right-top">
					<ul>
					<li><a href="#">热门优惠劵</a></li>
					<li>全场免费领取</li>
				</ul>
				<img src="img/3.bmp"/>
				</div>
				<div id="right-botton">
					<ul>
					<li><a href="#">精挑细选</a></li>
					<li>给你最好的选择</li>
				</ul>
				<img src="img/5.bmp"/>
				</div>
			</div>
		</div>
	</body>
</html>
